<template>
  <div class="allTop">
    <el-dialog
      title="入库"
      :visible.sync="visible"
      @close="close"
      :show="show"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        :inline="true"
        ref="formInline"
        :model="formInline"
        class="demo-form-inline"
        :rules="rules"
      >
        <div>
          <el-form-item label="入库单">
            <span style="color:red">入库批次单号:{{ pcNumber }}</span>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="农资名称">
            <span>{{ njName }}</span>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="数量：">
            <el-input
              placeholder="请填写数量"
              v-model="formInline.qty"
              @change="changeInput"
            ></el-input>
          </el-form-item>
          <span>最大可用({{ topNum }})</span>
        </div>
        <div>
          <el-form-item label="入库单价：" prop="price">
            <el-input
              placeholder="请填写单价"
              v-model="formInline.price"
              @change="changeInput_0"
            ></el-input>
          </el-form-item>
          <span>分</span>
        </div>
        <div>
          <el-form-item label="总计：">
            <span style="color:red;font-weight:700;font-size:18px">{{
              allNum
            }}</span>
            <span>元</span>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="入库人" prop="value">
            <el-select
              v-model="formInline.value"
              placeholder="请选择"
              @visible-change="enterPerson($event)"
            >
              <el-option
                v-for="item in options"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="formInline.remark"
              :autosize="{ minRows: 2, maxRows: 4 }"
            ></el-input>
          </el-form-item>
        </div>
        <div style="text-align:right">
          <el-button type="primary" @click="complete">完成</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { querynjSend, queryUser, querynjWarehousing } from "@/api/manage";
export default {
  data() {
    return {
      visible: false,
      pcNumber: "",
      kcId: "",
      njPrice: "",
      goodsId: "",
      njName: "",
      njgg: "",
      topNum: "",
      allNum: 0.0,
      formInline: {
        value: null,
        price: null
      },
      rules: {
        qty: [{ required: true, message: "请填写数量", trigger: "blur" }],
        price: [{ required: true, message: "请填写入库单价", trigger: "blur" }],
        value: [{ required: true, message: "请填写入库人员", trigger: "change" }]
      },
      options: []
    };
  },

  methods: {
    changeInput() {
      this.allNum = (this.formInline.price * this.formInline.qty) / 100;
    },
    changeInput_0() {
      this.allNum = (this.formInline.price * this.formInline.qty) / 100;
    },
    /**人员字典查询*/
    enterPerson(event) {
      queryUser().then(res => {
        this.options = res.data.rows;
      });
    },
    complete() {
      this.$refs.formInline.validate(valid => {
        if (valid) {
          this.btnload = true;
          this.visible = false;
          const formInline = this.formInline;
          formInline.inBatchCode = this.pcNumber;
          formInline.kcId = this.kcId;
          formInline.machineryId = this.goodsId;
          formInline.personId = this.formInline.value;
          formInline.pcNumber = this.pcNumber;
          querynjSend(formInline).then(res => {
            if (res.data.code == 200) {
              this.btnload = false;
              this.$message({ type: "success", message: res.data.msg });
            } else {
              this.$message({ type: "error", message: res.data.msg });
            }
          });
        } else {
          this.btnload = false;
          return false;
        }
      });
    },
    show(status, row) {
      this.formInline = {
        personId: null,
        num: null,
        remark: null,
        value: null,
        price: null
      };
      console.log(row);
      this.njName = row.machineryName;
      this.allNum = 0;
      this.kcId = row.id;
      this.goodsId = row.machineryId;
      this.njPrice = row.price;
      this.formInline.price = this.njPrice;
      this.visible = status;
      this.topNum = row.qty;
      querynjWarehousing().then(res => {
        this.pcNumber = res.data.msg;
      });
    },
    close() {
      this.$nextTick(() => {
        this.$refs.formInline.resetFields();
      });
    }
  }
};
</script>

<style scoped>
.allTop >>> .el-dialog__header {
  background: #009865;
}
.allTop >>> .el-dialog__title {
  color: white;
  font-size: 16px;
}
.allTop >>> .el-dialog__header {
  padding: 10px 10px 10px;
}
.allTop >>> .el-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
.demo-form-inline >>> .el-form-item__label {
  width: 100px;
}
</style>
